<template>
  <div>
    <div class="mui-content" style="background-color:#fff">
		    <h4 style="background-color:#efeff4">1F家居用品、电器</h4>
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="item in list1">
		            <router-link to=""  @click.native="jiazai">
		                <img class="mui-media-object" :src="item.img">
		                <div class="mui-media-body">{{item.title}}</div>
                    <p class="p1">积分:<span>{{item.score}}</span></p>
                 </router-link>
             </li>
		    </ul>
         <h4 style="background-color:#efeff4">2F小吃零食</h4>
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="item in list2">
		            <router-link to=""  @click.native="jiazai">
		                <img class="mui-media-object" :src="item.img">
		                <div class="mui-media-body">{{item.title}}</div>
                    <p class="p1">积分:<span>{{item.score}}</span></p>
                 </router-link>
             </li>
		    </ul> 
        <h4 style="background-color:#efeff4">3F男女服装</h4>
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="item in list3">
		            <router-link to=""  @click.native="jiazai">
		                <img class="mui-media-object" :src="item.img">
		                <div class="mui-media-body">{{item.title}}</div>
                    <p class="p1">积分:<span>{{item.score}}</span></p>
		            </router-link>
             </li>
		    </ul>      
        <h4 style="background-color:#efeff4">4F手机、数码配件</h4>
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="item in list4">
		            <router-link to=""  @click.native="jiazai">
		                <img class="mui-media-object" :src="item.img">
		                <div class="mui-media-body">{{item.title}}</div>
                    <p class="p1">积分:<span>{{item.score}}</span></p>
		            </router-link>
             </li>
		    </ul> 
        <h4 style="background-color:#efeff4">5F护肤化妆</h4>
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-4" v-for="item in list5">
		            <router-link to="" @click.native="jiazai">
		                <img class="mui-media-object" :src="item.img">
		                <div class="mui-media-body">{{item.title}}</div>
                    <p class="p1">积分:<span>{{item.score}}</span></p>
		            </router-link>
             </li>
		    </ul>                
		</div>
  </div>
</template>
<script>
import { Indicator } from 'mint-ui';
export default {
  data(){
    return{
      list1:[],
      list2:[],
      list3:[],
      list4:[]
    }
  },
  created(){
    this.getProductList()
  },
  methods:{
    jiazai(){
       Indicator.open('加载中...')
       setTimeout(()=>{
         Indicator.close();
         this.$router.push('/detail')
       },300)
     },
    getProductList(){
      this.list1=[
        {
          id:0,
          title:'利仁(Liven)DH利仁545454545',
          score:'11000',
          img:require('../../assets/img/1f1.jpg')
        },
        {
          id:1,
          title:'九阳(Joyoung)121545454',
          score:'11000',
          img:require('../../assets/img/1f2.jpg')
        },
        {
          id:2,
          title:'亿嘉IJARL LOTO454545555',
          score:'11000',
          img:require('../../assets/img/1f3.jpg')
        },
         {
          id:3,
          title:'九阳(Joyoung)121545454',
          score:'11000',
          img:require('../../assets/img/1f2.jpg')
        },
         {
          id:4,
          title:'利仁(Liven)DH利仁545454545',
          score:'11000',
          img:require('../../assets/img/1f3.jpg')
        },
        {
          id:5,
          title:'亿嘉IJARL LOTO454545555',
          score:'11000',
          img:require('../../assets/img/1f1.jpg')
        }
      ]
      this.list2=[
        {
          id:0,
          title:'百草味 年货坚果454545',
          score:'999',
          img:require('../../assets/img/2f1.jpg')
        },
        {
          id:1,
          title:'德芙Dove糖果巧克力121545454',
          score:'12380',
          img:require('../../assets/img/2f2.jpg')
        },
        {
          id:2,
          title:'【中粮海外直采】454545555',
          score:'2758',
          img:require('../../assets/img/2f3.jpg')
        },
         {
          id:3,
          title:'百草味 中秋礼盒12121212',
          score:'9897',
          img:require('../../assets/img/2f4.jpg')
        },
         {
          id:4,
          title:'百草味 年货坚果545454545',
          score:'999',
          img:require('../../assets/img/2f5.jpg')
        },
        {
          id:5,
          title:'波兰进口 摩卡咖啡O454545555',
          score:'4367',
          img:require('../../assets/img/2f6.jpg')
        }
      ]
      this.list3=[
         {
          id:0,
          title:'休闲运动男女春夏454545',
          score:'5800',
          img:require('../../assets/img/3f1.jpg')
        },
        {
          id:1,
          title:'休闲运动男女春夏454545',
          score:'5000',
          img:require('../../assets/img/3f2.jpg')
        },
        {
          id:2,
          title:'婴儿亲肤纯棉女春装321545',
          score:'9800',
          img:require('../../assets/img/3f2.jpg')
        },
         {
          id:3,
          title:'休闲运动男女春夏454545',
          score:'1000',
          img:require('../../assets/img/2f3.jpg')
        },
         {
          id:4,
          title:'婴儿亲肤纯棉女春装321545',
          score:'1000',
          img:require('../../assets/img/3f1.jpg')
        },
        {
          id:5,
          title:'休闲运动男女春夏454545',
          score:'1000',
          img:require('../../assets/img/2f6.jpg')
        }
      ]
      this.list4=[
         {
          id:0,
          title:'单反相机，彰显你的4545',
          score:'100000',
          img:require('../../assets/img/xj.jpg')
        },
        {
          id:1,
          title:'吸盘式手机支架/54555454',
          score:'2900',
          img:require('../../assets/img/4f2.jpg')
        },
        {
          id:2,
          title:'Lightning数据线454545555',
          score:'2680',
          img:require('../../assets/img/4f3.jpg')
        },
         {
          id:3,
          title:'8孔位3米插座插排5555555',
          score:'3980',
          img:require('../../assets/img/4f4.jpg')
        },
         {
          id:4,
          title:'Lightning数据线454545555',
          score:'2680',
          img:require('../../assets/img/4f3.jpg')
        },
        {
          id:5,
          title:'吸盘式手机支架/54555454',
          score:'4367',
          img:require('../../assets/img/4f2.jpg')
        }
      ]
      this.list5=[
         {
          id:0,
          title:'相宜本草 橄榄油45454545',
          score:'1590',
          img:require('../../assets/img/5f1.jpg')
        },
        {
          id:1,
          title:'海飞丝去屑洗发水54555454',
          score:'2190',
          img:require('../../assets/img/5f2.jpg')
        },
        {
          id:2,
          title:'舒肤佳(Safeguar)454545555',
          score:'1760',
          img:require('../../assets/img/5f3.jpg')
        },
         {
          id:3,
          title:'舒肤佳(Safeguar)454545555',
          score:'1760',
          img:require('../../assets/img/5f3.jpg')
        },
         {
          id:4,
          title:'相宜本草 橄榄油45454545',
          score:'1590',
          img:require('../../assets/img/5f1.jpg')
        },
        {
          id:5,
          title:'海飞丝去屑洗发水54555454',
          score:'2190',
          img:require('../../assets/img/5f2.jpg')
        }
      ]
    }
  }
}
</script>
<style scoped>
h4, .mui-h4{
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  padding: 10px
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
  text-align:left;
  margin-top: 0;
  font-size: 1rem;
  color: #000
}
.p1{
  text-align: left;
  font-size: 1rem;
  color: #8f8f94;
}
.p1 span{
  color: red;
}
.mui-table-view:before,
.mui-table-view:after{
  background-color:transparent;
}
</style>


